<div [@routerTransition]>
    <div class="m-subheader">
        <div class="align-items-center row" style="margin: 0;">
            <!-- <div class="float-left" style="min-width: 80px;">
                <h5 style="padding-top: 6px; padding-right: 20px;">
                    <span>燃动</span>
                </h5>
            </div> -->
            <div class="float-left" style="min-width: 200px;">
                <h3 class="m-subheader__title m-subheader__title--separator"><span>刀具管理</span></h3>
                <span>
                    刀具管理
                </span>
            </div>
            <!-- <div class="float-left" style="min-width: 240px;">
                <label for="StartEndRange">时间</label>
                <date-month-range [(dateRange)]="dateRange"></date-month-range>
            </div>

            <div class="float-left" style="min-width: 270px;">
                <label for="userDataPermissions" class="float-left" style="padding-top: 6px;">部门</label>
                <p-multiSelect class="float-left" id="userDataPermissions" [options]="userDataPermissions" name="table"
                    [(ngModel)]="selectedDepts" [style]="{ width: '220px', margin: '0 10px', border: 'none' }"
                    styleClass="form-control" defaultLabel="选择部门" maxSelectedLabels="5"
                    selectedItemsLabel="已选择 {0} 个部门">
                </p-multiSelect>
            </div> -->

            <div class="ui-g ui-fluid">
                <div class="ui-g-12 ui-md-4">
                    <div class="ui-inputgroup">
                        <button pButton type="button" label="Search" (click)="getAllAsync($event)"></button>
                        <input type="text" pInputText placeholder="刀具类型" [(ngModel)]="cutleryType">

                        <input type="text" pInputText placeholder="车间" [(ngModel)]="workshop">
                        <input type="text" pInputText placeholder="年份" [(ngModel)]="year">

                    </div>
                </div>
            </div>

            <div class="float-right ml-auto" style="margin-left: 10px; min-width: 160px;">
                <button (click)="getTableData($event)" class="btn btn-primary blue">
                    刷新
                </button>
                <button (click)="createOrEditCutlery()" class="btn btn-primary blue">
                    新增
                </button>
                <ng-container *ngIf="selectedValues.length == 1">
                    <!-- <button (click)="createOrEditPowerModal.show(selectedValues[0].id)" class="btn btn-primary blue"
                        type="submit">
                        <i [attr.aria-label]="l('Update')"> </i> 更新
                    </button> -->
                    <button (click)="selectedDelete()"
                        *ngIf="permission.isGranted('Pages.Cost.PowerProductions.Delete')" class="btn btn-danger"
                        type="submit">
                        <i [attr.aria-label]="l('Delete')"> </i> 删除
                    </button>
                </ng-container>
                <ng-container *ngIf="selectedValues.length > 1">
                    <button (click)="selectedDelete()"
                        *ngIf="permission.isGranted('Pages.Cost.PowerProductions.Delete')" class="btn btn-danger"
                        type="submit">
                        <i [attr.aria-label]="l('Delete')"> </i> 批量删除
                    </button>
                </ng-container>
                <!-- <button (click)="batchDelete()" class="btn btn-danger" type="submit">
                    <i> </i> 清空数据
                </button> -->

                <button (click)="excelModal.show('Cost_PowerProduction', '燃动费用', null, 1)" class="btn btn-primary blue">
                    导入
                </button>
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="tabbable-line">
                    <div class="tab-content" style="padding-top:0;">
                        <div class="tab-pane active" id="tab-model">
                            <div class="row align-items-center">
                                <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                                    <p-table #dataTable (onLazyLoad)="getTableData($event)"
                                        [value]="primengTableHelper.records"
                                        [rows]="primengTableHelper.defaultRecordsCountPerPage" [paginator]="false"
                                        [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                                        [responsive]="primengTableHelper.isResponsive"
                                        [resizableColumns]="primengTableHelper.resizableColumns"
                                        selectionMode="multiple" [(selection)]="selectedValues">
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <!-- <th style="width: 20px">
                                                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                                </th> -->
                                                <th style="width: 50px"
                                                    [hidden]="!isGrantedAny('Pages.Administration.Users.Impersonation', 'Pages.Administration.Users.Edit', 'Pages.Administration.Users.ChangePermissions', 'Pages.Administration.Users.Delete')">
                                                    {{'Actions' | localize}}</th>

                                                <th style="width: 40px">
                                                    刀具类型
                                                </th>
                                                <!-- <ng-container *ngFor="let ext of extensions">
                                                    <th width="{{ ext.width }}">
                                                        {{ ext.title }}
                                                    </th>
                                                </ng-container> -->
                                                <th style="width: 40px">
                                                    车间
                                                </th>

                                                <th style="width: 40px">
                                                    年份
                                                </th>
                                                <th style="width: 40px">
                                                    价格
                                                </th>
                                                <th style="width: 40px">
                                                    使用年限
                                                </th>

                                                <th style="width: 40px">
                                                    创建时间
                                                </th>



                                            </tr>
                                        </ng-template>

                                        <ng-template pTemplate="body" let-record="$implicit">
                                            <tr>
                                                <!-- <td style="width: 5px">
                                                    <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                                </td> -->
                                                <td style="width: 50px"
                                                    [hidden]="!isGrantedAny('Pages.Administration.Users.Impersonation', 'Pages.Administration.Users.Edit', 'Pages.Administration.Users.ChangePermissions', 'Pages.Administration.Users.Delete')">
                                                    <div class="btn-group dropdown" dropdown container="body">
                                                        <button dropdownToggle
                                                            class="dropdown-toggle btn btn-sm btn-primary">
                                                            <i class="fa fa-cog"></i><span class="caret"></span>
                                                            {{"Actions" | localize}}
                                                        </button>
                                                        <ul class="dropdown-menu" *dropdownMenu>

                                                            <li>
                                                                <a href="javascript:;"
                                                                    (click)="createOrEditCutleryModal.show(record.id)">{{'Edit' | localize}}</a>
                                                            </li>

                                                            <li>
                                                                <a href="javascript:;"
                                                                    *ngIf="'Pages.Administration.Users.Delete' | permission"
                                                                    (click)="delete(record)">{{'Delete' | localize}}</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td>
                                                <td style="width: 40px">
                                                    {{record.cutleryType }}
                                                </td>

                                                <td style="width: 40px">
                                                    {{ record.workshop }}
                                                </td>
                                                <td style="width: 40px">
                                                    {{ record.year }}
                                                </td>





                                                <td style="width: 40px">
                                                    {{ record.averageUnitPrice}}
                                                </td>

                                                <td style="width: 40px">
                                                    {{ record.serviceLife}}
                                                </td>

                                                <td style="width: 40px">
                                                    {{ record.creationTime|momentFormat:'L'}}
                                                </td>

                                            </tr>
                                        </ng-template>
                                    </p-table>
                                    <!-- <p-contextMenu #cm [model]="itemContextMenuItems"></p-contextMenu> -->
                                    <div class="primeng-paging-container">
                                        <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                            (onPageChange)="getTableData($event)"
                                            [totalRecords]="primengTableHelper.totalRecordsCount"
                                            [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                        </p-paginator>
                                        <span class="total-records-count">
                                            {{ l('TotalRecordsCount', primengTableHelper.totalRecordsCount) }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <createOrEditCutleryModal #createOrEditCutleryModal (modalSave)="getTableData()">
    </createOrEditCutleryModal>

    <!-- <excelModal #excelModal (importEnd)="importEnd($event)" (importStart)="primengTableHelper.showLoadingIndicator()">

    </excelModal> -->
</div>
